<template>
  <aside :class="['aui-sidebar', `aui-sidebar--${$store.state.sidebarLayoutSkin}`]"
         style="paddintBottom:30px;">
    <div class="aui-sidebar__inner">
      <el-menu :default-active="$store.state.sidebarMenuActiveName"
               :collapse="$store.state.sidebarFold"
               :unique-opened="true"
               :default-openeds="openeds"
               :collapseTransition="false"
               @select="menuselect"
               ref="sidebar-menu"
               class="aui-sidebar__menu">
        <sub-menu :menu="hidemenu" />
        <sub-menu v-for="menu in showMenuList"
                  :key="menu.id"
                  :menu="menu" />
      </el-menu>
    </div>
  </aside>
</template>

<script>
import SubMenu from './main-sidebar-sub-menu'
export default {
  data () {
    return {
      hidemenu: {
        children: [],
        createDate: null,
        hideFromMenu: false,
        icon: 'icon-left',
        id: '770025574602186',
        name: 'menu-status',
        param: null,
        parentName: null,
        permissions: '',
        pid: '0',
        sort: 0,
        type: 0,
        url: ''
      },
      openeds: ['1338915304642555906']
    }
  },
  components: {
    SubMenu
  },
  created () {
    this.$store.state.sidebarMenuList = window.SITE_CONFIG['menuList']
    if (this.permissionCount()) {
      this.$store.state.sidebarMenuList = this.$store.state.sidebarMenuList.filter(item => item.name !== 'Widgets')
    }
    if (this.$store.state.user.regSource === '3') {
      this.$store.state.sidebarFold = false
    } else {
      if (this.$store.state.app.loginPath && (this.$store.state.app.loginPath === 'WEBTEAMSTAB' || this.$store.state.app.loginPath === 'DESKTOPTEAMS')) {
        this.$store.state.sidebarFold = false
      } else {
        this.$store.state.sidebarFold = localStorage.getItem('sidebarFold') !== null ? localStorage.getItem('sidebarFold') : false
      }
    }
  },
  computed: {
    showMenuList () {
      let tempList = this.$store.state.sidebarMenuList || []
      // hide menu
      tempList.forEach(item => {
        if (!this.$store.state.user.username.includes('mspbots.ai')) {
          if (item.name === 'Super Admin' || item.name === 'Dev Team') {
            item.hideFromMenu = true
          }
        }
      })
      return this.formatRoutes(tempList)
    },
    isShowMenu () {
      return this.$store.state.sidebarFold
    }
  },
  watch: {
    isShowMenu: {
      handler: function (val) {
        if (val) {
          this.hidemenu.icon = 'icon-right'
        } else {
          this.hidemenu.icon = 'icon-left'
        }
      },
      deep: true
    }
  },
  methods: {
    permissionCount () {
      let tempBool = false
      let a = this.$hasPermission('sys:widget:showwidgetlist') ? 1 : 0
      let b = this.$hasPermission('sys:widget:noshowwidgetlist') ? 1 : 0
      let c = this.$hasPermission('sys:widget:booleanshowwidgetlist') ? 1 : 0
      if (a + b + c === 2) {
        tempBool = true
      }
      return tempBool
    },
    menuselect (index) {
      if (index === this.hidemenu.id) {
        if (this.$store.state.app.loginPath && (this.$store.state.app.loginPath === 'WEBTEAMSTAB' || this.$store.state.app.loginPath === 'DESKTOPTEAMS')) {
          this.$store.state.sidebarFold = false
        } else {
          this.$store.state.sidebarFold = !this.$store.state.sidebarFold
        }
        this.$refs['sidebar-menu'].activeIndex = this.$route.meta.menuId
      }
    },
    formatRoutes (routerArr = []) {
      let arr = []
      let obj = {}
      routerArr.forEach(router => {
        const tmp = { ...router }
        if (tmp.hideFromMenu) {
        } else {
          tmp.children = this.formatRoutes(tmp.children || [])
          obj = {
            children: tmp.children,
            createDate: tmp.createDate,
            hideFromMenu: tmp.hideFromMenu,
            icon: tmp.icon,
            id: tmp.id,
            name: tmp.name,
            param: tmp.param,
            parentName: tmp.parentName,
            permissions: tmp.permissions,
            pid: tmp.pid,
            sort: tmp.sort,
            type: tmp.type,
            url: tmp.url,
            tooltip: tmp.tooltip
          }
          arr.push(obj)
        }
      })
      return arr
    }
  }
}
</script>
<style lang="scss" scoped>
.hide-or-show-menu {
  position: absolute;
  right: 20px;
  bottom: 20px;
  display: block;
  z-index: 255;
  background: #ffffff;
  box-shadow: 0 0 1px #000000;
  width: 24px;
  height: 18px;
  & > svg {
    width: 100%;
    height: 100%;
  }
}
</style>
